*{
    margin: 0;
    padding: 0;
}
img {border: 0;}
address,caption,em,i,strong,th
{
    font-weight: normal;
    font-style: normal;
}
ol,ul {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 
{
    font-weight: normal;
    font-size: 100%;
}
body
{
    color:#1A1A1A;
    font:14px/1.5 Microsoft YaHei,Arial,Helvetica,sans-serif;
}
a{text-decoration:none;color:#1A1A1A;}
#header{
    width: 1349px;
    height: 60px;
    margin-bottom: 5px;
    background-color: royalblue;
}
#logo img{
    width: 210px;
    height: 60px;
}
#logo{
    width: 210px;
    height: 60px;
    display: inline-block;
    float: left;
    margin-left: 100px;
}
#nav{
    margin-left: 50px;
    float: left;
}
#nav>li{
    display: inline-block;
    width: 100px;
    height: 57px;
    line-height: 60px;
    text-align: center; 
    border-bottom: 3px solid red;
    position: relative;
    transition:all 0.2s ease-in-out;
}
.sub_nav{
    display: none;
    background-color: white;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 100;
}
.sub_nav li{
    display: block;
    width: 150px;
    height: 50px;
    transition:all 0.2s ease-in-out;
}
#nav li:hover{
    background-color: red;
}
#nav li:hover .sub_nav{
    display: block;
    transition:all 1s ease-in-out;
}
/* #banner a{
    display: block;
    width: 1100px;
    height: 300px;
    background-image: url("image/index.png");
    background-color: brown;
    margin: 0 auto;
}
.banner_list{
    text-align: center;
    margin-top: -20px;
} */
.banner_list li{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius:12px;
	border:2px solid #fff;
	background-color: #fff;
    background:transparent;
    transition:all .5s ease;
}
#wrapper{
    width: 1100px;
   
    margin: 0 auto;
}
.inner_wrapper{
    overflow:hidden;
}
.left{
    width: 240px;

    float: left;
}
.left header{
    width: 240px;
    height: 24px;
}
.left li{
    width: 240px;
    height: 32px;
    line-height: 32px;
}
.left li+li{
    border-top:1px dashed darkslategray;
}
.left_nav{
    border-top: 1px solid darkslategray;
    border-bottom:1px solid darkslategray;
}
.center_box{
    background-color: deeppink;
    float: left;
    margin-top: 2px;
}
.big_box{
    width: 190px;
    height: 130px;
  /*  background-image: url("image/big.png");*/
    
}
.center_top{
    position: relative;
    width: 590px;
    height: 200px;
    margin-left: 5px;
}
.small_box{
  /*  background-image: url("image/small.back.png");*/
    width: 90px;
	height: 60px;
    display: inline-block;
    
}
.midder_box{
    width: 190px;
	height: 60px;
	display: inline-block;
/*	background-image: url("image/ma.png");*/
}
.center_top li{position: absolute;}
.center_top li:nth-child(1){top:0;left:0;}
.center_top li:nth-child(2){top:0;left:200px;}
.center_top li:nth-child(3){top:0;left:300px;}
.center_top li:nth-child(4){top:0;left:400px;}
.center_top li:nth-child(5){top:0;left:500px;}
.center_top li:nth-child(6){top:70px;left:200px;}
.center_top li:nth-child(7){top:70px;left:300px;}
.center_top li:nth-child(8){top:70px;left:400px;}
.center_top li:nth-child(9){top:140px;left:0;}
.center_top li:nth-child(10){top:140px;left:100px;}
.center_top li:nth-child(11){top:140px;left:200px;}
.center_top li:not(.big_box) a
{
    perspective:100000px;
    perspective-origin:50% 50%;
    transform-style:-webkit-preserve-3d;
    -webkit-perspective:10000px;/*非常重要，如果换为“-webkit-perspective:800;”则会出现bug*/
    -webkit-perspective-origin:50% 50%;
    -webkit-transform-style:-webkit-preserve-3d;
    -moz-perspective:10000px;
    -moz-perspective-origin:50% 50%;
    -moz-transform-style:-webkit-preserve-3d;
    position:relative;
    display:block;
    width:90px;
    height:60px;
}
.front,.back
{
    position:absolute;
    top:0;
    left:0;
    transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
}
.small_box .front    
{
    width:90px;
    height:60px;
    background-image:url("image/small.png");
}
.middle_box .front    
{
    width:190px;
    height:60px;
    background-image:url("image/maddle.png");
}
.center_top a:hover .front{transform:translateY(30px) rotateX(-90deg);}
.small_box .back,.middle_box .back
{
    height:60px;
    line-height:60px;
    text-align:center;
    font-size:16px;
    color:White;
}
.small_box .back
{
    width:90px;
    background-image:url("image/small.back.png");
    transform:translateY(-30px) rotateX(90deg)   
}
.middle_box .back
{
    width:190px;
    background-image:url("image/ma.png");
    transform:translateY(-30px) rotateX(90deg)   
}
.center_top a:hover .back{transform:translateY(0px) rotateX(0deg);}

.big_box 
{
    overflow:hidden;
    position:relative;
    width:190px;
    height:130px;
}
.big_box_front
{
    width:190px;
    height:130px;
    background-image:url("image/big.png");
}
.big_box_back
{
    position:absolute;
    top:-130px;
    left:0;
    width:190px;
    height:130px;
    background-color:rgba(145,220,255,0.6);
    transition:all 0.4s ease-in-out;
}
.big_box_back h3
{
    font-size:18px;
    font-weight:bold;
    text-indent:24px;
    color:White;
    padding-top:30px;
    padding-bottom:15px;
}
.big_box_back p
{
    text-indent:24px;
    color:White;
}
.big_box a:hover .big_box_back
{
    top:0;
}

.center_botten{
   width: 590px;
   height: 88px;
   margin-left: 5px;
   margin-top: 5px;
   text-align: center;
}
.center_botten li{
   display: inline-block;
   width: 70px;
   height: 90px;
}
.center_botten li+li{
    margin-left: 20px;
}
.right{
    width: 240px;
    height: 272px;
    background-color: ;
    float: left;
    margin-left: 5px;
}
.right li{
    width: 240px;
    height: 32px;
    line-height: 32px;
}
.right li+li{
    border-top:1px dashed darkslategray;
}
.right_nav{
    border-top: 1px solid darkslategray;
    border-bottom:1px solid darkslategray;
}
.junior{
    margin-top:30px;
    overflow:hidden;
}
.junior h2{
    font-size:16px;
    font-weight:bold;
    padding-left:10px;
    
    margin-bottom:8px;
    border-left:4px solid #69bcf3;
}
.junior_list li{
    float:left;
    overflow:hidden;
    position:relative;
    width:200px;
    height:140px;
    background-color:silver;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.junior_list li:hover{
    box-shadow:0 4px 12px #85BFA4;
}
.junior_list li+li{
    margin-left:25px;
}
.junior_back{
    position:absolute;
    top:110px;
    left:0;
    transition:all 0.3s ease-out;
}
.junior_list li:hover .junior_back{
    top:60px;
}
.senior{
    margin-top:30px;
    overflow:hidden;
}
.senior h2{
    font-size:16px;
    font-weight:bold;
    padding-left:10px;
    margin-bottom:8px;
    border-left:4px solid #69bcf3;
}
.senior_list li{
    float:left;
    overflow:hidden;
    position:relative;
    width:200px;
    height:140px;
    background-color:silver;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.senior_list li:hover{
    box-shadow:0 4px 12px #85BFA4;
}
.senior_list li+li{
    margin-left:25px;
}
.senior_back{
    position:absolute;
    top:110px;
    left:0;
    transition:all 0.3s ease-out;
}
.senior_list li:hover .junior_back{
    top:60px;
}
#main{
    width:1000px;
    margin:0 auto;
  }
  #banner{
    width:1000px;
    overflow:hidden;
    position:relative;
  }
  #ul-imgs{
    list-style:none;
  }
  #ul-imgs.transition{
    transition:all .5s linear;
  }
  #ul-imgs>li{
    width:1000px;
    float:left;
  }
  #ul-imgs img{
    width:1000px;
  }
  #ul-idxs{
    width:100px;
    margin:0 auto;
    list-style:none;
    position:absolute;
    bottom:25px;
    left:50%;
    margin-left:-50px;
  }
  #ul-idxs>li{
    float:left;
    width:10px; height:10px;
    background-color:#fff;
    border-radius:5px;
    margin:0 5px;
    cursor:pointer;
  }
  #ul-idxs>li.active{
    background-color:blue;
  }
  #btn-left,#btn-right{
    width:60px;
    height:100%;
    position:absolute;
    top:0;
    background-repeat:no-repeat;
    background-position:center;
    cursor:pointer;
  }
  #btn-left{
    left:20px;
    background-image:url(image/carousel_item/left_ar.png);
  }
  #btn-right{
    right:20px;
    background-image:url(image/carousel_item/right_ar.png);
  }
  #btn-left:hover,#btn-right:hover{
    background-size:40px 70px
  }